/**
 * 病友圈页面组件
 * 
 * 功能概述：
 * 1. 展示病友圈帖子列表，支持按科室分类浏览
 * 2. 提供科室切换功能，支持不同科室的帖子筛选
 * 3. 支持帖子收藏/取消收藏功能
 * 4. 提供帖子详情页跳转功能
 * 5. 支持发布新帖子功能
 * 6. 实现分页加载和加载更多功能
 * 7. 显示帖子悬赏金额和互动数据
 * 
 * 技术特点：
 * - 使用 React Hooks 进行状态管理
 * - 集成 Ant Design Mobile 组件库
 * - 支持分页加载和状态管理
 * - 完善的错误处理和用户反馈
 * - 响应式设计和移动端优化
 */

// 导入 React 核心功能：useEffect 用于副作用处理，useState 用于状态管理
import React, { useEffect, useState } from 'react'
// 导入 Ant Design Mobile 组件库：提供移动端UI组件
import { NavBar, Tabs, Toast, SpinLoading, Button } from 'antd-mobile'
// 导入 React Router 的导航钩子：useNavigate 用于页面跳转
import { useNavigate } from 'react-router-dom'
// 导入 Ant Design Mobile 图标库：提供各种图标组件
import { AddOutline, StarOutline } from 'antd-mobile-icons'
// 导入自定义请求工具：封装了 axios，用于与后端 API 通信
import request from '../../api/request'
// 导入病友圈相关API函数：用于收藏和取消收藏帖子
import { addSickCircleCollection, cancelSickCircleCollection } from '../../api/sickCircle'
// 导入 Redux 相关
import { useSelector } from 'react-redux'
import type { RootState } from '../../store/types'
// 导入权限检查函数
import { hasPermission } from '../../utils/permission'
// 导入样式文件：定义组件的样式规则
import './index.css'

/**
 * 科室数据项接口
 * 
 * 定义了科室信息的数据结构，用于科室筛选功能
 * 包含科室的基本信息和排序权重
 * 
 * 字段说明：
 * - id: 科室唯一标识符，用于API调用和数据关联
 * - departmentName: 科室名称，如"内科"、"外科"等
 * - pic: 科室图标URL，用于显示科室图标
 * - rank: 科室排名，用于排序显示
 */
interface DepartmentItem {
  id: number                // 科室唯一标识符，用于API调用和数据关联
  departmentName: string    // 科室名称，如"内科"、"外科"等
  pic: string              // 科室图标URL，用于显示科室图标
  rank: number             // 科室排名，用于排序显示
}

/**
 * 病友圈帖子数据项接口
 * 
 * 定义了病友圈帖子的完整数据结构，包含基本信息、统计数据、收藏状态等
 * 这个接口用于统一处理病友圈数据的类型检查和数据操作
 * 
 * 字段说明：
 * - sickCircleId: 帖子唯一标识符，用于API调用和数据关联
 * - userId: 发布用户的ID，用于用户信息关联
 * - title: 帖子标题，显示在帖子卡片中
 * - detail: 帖子详细内容，用于展示病症描述
 * - releaseTime: 发布时间戳（毫秒），用于时间显示和排序
 * - collectionNum: 收藏数量，显示帖子的收藏次数
 * - commentNum: 评论数量，显示帖子的评论次数
 * - amount: 悬赏金额，显示帖子的悬赏金币数
 * - collectionFlag: 收藏状态标识，1表示已收藏，0表示未收藏，可选字段
 */
interface SickCircleItem {
  sickCircleId: number      // 帖子唯一标识符，用于API调用和数据关联
  userId: number           // 发布用户的ID，用于用户信息关联
  title: string            // 帖子标题，显示在帖子卡片中
  detail: string           // 帖子详细内容，用于展示病症描述
  releaseTime: number      // 发布时间戳（毫秒），用于时间显示和排序
  collectionNum: number    // 收藏数量，显示帖子的收藏次数
  commentNum: number       // 评论数量，显示帖子的评论次数
  amount: number          // 悬赏金额，显示帖子的悬赏金币数
  collectionFlag?: number  // 收藏状态标识，1表示已收藏，0表示未收藏，可选字段
}

/**
 * 病友圈页面组件
 * 
 * 提供完整的病友圈功能，包括展示、筛选、收藏、发布等
 * 支持科室分类、分页加载、收藏管理等高级功能
 * 
 * 主要功能模块：
 * 1. 病友圈帖子列表展示和分页加载
 * 2. 科室分类和切换功能
 * 3. 帖子收藏/取消收藏功能
 * 4. 帖子详情页跳转
 * 5. 发布新帖子功能
 * 6. 悬赏金额显示
 * 7. 互动数据统计
 */
function SickCircle() {
  // 获取路由导航函数，用于页面跳转和返回操作
  const navigate = useNavigate()
  // 获取用户邮箱
  const userEmail = useSelector((state: RootState) => state.info.email)
  
  // ==================== 状态管理 ====================
  // 以下状态变量用于管理组件的各种状态和数据
  
  /**
   * 科室列表数据
   * 
   * 存储所有可用科室的信息，用于科室筛选功能
   * 数据类型为 DepartmentItem[]，包含科室的基本信息
   * 
   * 数据特点：
   * - 在组件初始化时一次性获取
   * - 用于科室标签页展示和筛选
   * - 支持科室图标和名称显示
   */
  const [departments, setDepartments] = useState<DepartmentItem[]>([])
  
  /**
   * 病友圈帖子列表数据
   * 
   * 存储当前显示的病友圈帖子信息，支持分页加载和动态更新
   * 数据类型为 SickCircleItem[]，包含所有帖子的详细信息
   * 
   * 数据来源：
   * - 初始加载：从API获取第一页数据
   * - 加载更多：通过分页加载追加新数据
   * - 科室切换：根据选择的科室重新获取数据
   */
  const [sickCircleList, setSickCircleList] = useState<SickCircleItem[]>([])
  
  /**
   * 当前选中的科室ID
   * 
   * 用于科室筛选，记录用户当前选择的科室
   * 默认值为0，在获取科室列表后设置为第一个科室的ID
   * 
   * 使用场景：
   * - 科室筛选功能
   * - API请求参数
   * - 科室标签页高亮显示
   */
  const [activeDepartmentId, setActiveDepartmentId] = useState<number>(0)
  
  /**
   * 加载状态标识
   * 
   * 标记当前是否正在加载数据，用于显示加载指示器
   * true 表示正在加载，false 表示加载完成
   * 
   * 使用场景：
   * - 初始页面加载时显示加载动画
   * - 防止用户重复触发数据请求
   * - 提供用户友好的加载反馈
   */
  const [loading, setLoading] = useState<boolean>(false)
  
  /**
   * 当前页码
   * 
   * 用于分页加载，记录当前加载到第几页
   * 从1开始计数，用于API请求的page参数
   * 
   * 更新时机：
   * - 初始加载：设置为1
   * - 加载更多：递增1
   * - 科室切换：重置为1
   */
  const [currentPage, setCurrentPage] = useState<number>(1)
  
  /**
   * 是否还有更多数据
   * 
   * 标记是否还有更多病友圈帖子可以加载，用于分页功能
   * true 表示还有更多数据，false 表示已加载完所有数据
   * 
   * 判断逻辑：
   * - 根据API返回的数据量判断
   * - 如果返回的数据量等于请求的数量（10条），说明可能还有更多
   * - 用于控制"加载更多"按钮的显示状态
   */
  const [hasMore, setHasMore] = useState<boolean>(true)
  
  /**
   * 收藏操作加载状态
   * 
   * 记录每个帖子的收藏操作是否正在进行中
   * 使用对象形式，key为帖子ID，value为是否正在加载
   * 
   * 使用场景：
   * - 防止用户重复点击收藏按钮
   * - 在收藏操作期间显示加载动画
   * - 提供用户操作反馈
   */
  const [collectionLoading, setCollectionLoading] = useState<{ [key: number]: boolean }>({})

  // ==================== 事件处理函数 ====================
  // 以下函数负责处理用户的各种交互事件
  
  /**
   * 返回上一页
   * 
   * 处理用户点击返回按钮的事件，使用浏览器历史记录返回上一页
   * 
   * 实现方式：
   * - 使用 React Router 的 navigate(-1) 方法
   * - 保持浏览器的历史记录完整性
   * - 支持用户通过浏览器返回按钮操作
   */
  const handleBack = () => {
    navigate(-1)
  }

  // ==================== API 数据获取函数 ====================
  // 以下函数负责从后端获取数据，处理API请求和响应
  
  /**
   * 获取科室列表数据
   * 
   * 从后端API获取所有可用科室的信息，用于科室筛选功能
   * 这个函数在组件初始化时调用，获取科室数据供用户选择
   * 
   * API接口：/health/share/knowledgeBase/v1/findDepartment
   * 
   * 功能特点：
   * - 一次性获取所有科室数据
   * - 支持科室图标和名称显示
   * - 自动设置默认选中的第一个科室
   * - 获取科室后立即加载该科室的帖子列表
   * - 完善的错误处理和用户反馈
   */
  const getDepartments = () => {
    request.get('/health/share/knowledgeBase/v1/findDepartment').then((res) => {
      console.log('科室数据:', res)
      if (res.status === 200 && res.data.status === '0000') {
        const deptList = res.data.result || []
        setDepartments(deptList)
        // 设置默认选中的第一个科室
        if (deptList.length > 0) {
          setActiveDepartmentId(deptList[0].id)
          getSickCircleList(deptList[0].id, 1, true)
        }
      } else {
        Toast.show({
          content: res.data.message || '获取科室数据失败',
          position: 'center',
        })
      }
    }).catch((error) => {
      console.error('获取科室数据失败:', error)
      Toast.show({
        content: '获取科室数据失败，请重试',
        position: 'center',
      })
    })
  }

  /**
   * 获取病友圈帖子列表数据
   * 
   * 从后端API获取病友圈帖子列表，支持分页加载、科室筛选等功能
   * 这是病友圈页面的核心数据获取函数
   * 
   * API接口：/health/user/sickCircle/v1/findSickCircleList
   * 
   * 参数说明：
   * @param departmentId 科室ID，用于科室筛选
   * @param page 页码，用于分页加载
   * @param reset 是否为重置模式，true表示重置数据，false表示追加数据
   * 
   * 请求参数：
   * - departmentId: 科室ID，用于科室筛选
   * - page: 页码，用于分页加载
   * - count: 每页数量，固定为10条
   * 
   * 数据处理：
   * - 数据验证和清理
   * - 字段默认值处理
   * - 收藏状态管理
   * - 分页状态更新
   */
  const getSickCircleList = (departmentId: number, page: number, reset: boolean = false) => {
    // 如果是重置模式，清空现有数据并重置分页状态
    if (reset) {
      setSickCircleList([])
      setCurrentPage(1)
      setHasMore(true)
    }

    setLoading(true)
    request.get('/health/user/sickCircle/v1/findSickCircleList', {
      params: {
        departmentId: departmentId,
        page: page,
        count: 10
      }
    }).then((res) => {
      console.log('病友圈数据:', res)
      if (res.status === 200 && res.data.status === '0000') {
        const list = res.data.result || []
        
        // 数据验证和清理
        // 过滤掉无效数据，确保数据结构的完整性
        const validList = list.filter((item: Record<string, unknown>) => {
          return item && typeof item === 'object' && item.sickCircleId
        }).map((item: Record<string, unknown>) => ({
          sickCircleId: item.sickCircleId || 0,
          userId: item.userId || 0,
          title: item.title || '无标题',
          detail: item.detail || '暂无描述',
          releaseTime: item.releaseTime || 0,
          collectionNum: item.collectionNum || 0,
          commentNum: item.commentNum || 0,
          amount: item.amount || 0,
          collectionFlag: item.collectionFlag || 0 // 添加收藏状态
        }))
        
        // 根据重置模式决定数据更新方式
        if (reset) {
          // 重置模式：用新数据替换现有数据
          setSickCircleList(validList)
        } else {
          // 追加模式：将新数据追加到现有数据后面
          setSickCircleList(prev => [...prev, ...validList])
        }
        
        // 根据返回的数据量判断是否还有更多数据
        // 如果返回的数据量等于请求的数量（10条），说明可能还有更多数据
        setHasMore(validList.length === 10)
      } else {
        // API返回非成功状态码，显示错误提示
        Toast.show({
          content: res.data.message || '获取病友圈数据失败',
          position: 'center',
        })
        if (reset) {
          setSickCircleList([])
        }
      }
    }).catch((error) => {
      // API请求过程中发生错误，记录错误信息并显示用户友好的提示
      console.error('获取病友圈数据失败:', error)
      Toast.show({
        content: '获取病友圈数据失败，请重试',
        position: 'center',
      })
      if (reset) {
        setSickCircleList([])
      }
    }).finally(() => {
      // 无论成功还是失败，都要将加载状态设置为false
      setLoading(false)
    })
  }

  // ==================== 用户交互处理函数 ====================
  // 以下函数负责处理用户的交互操作
  
  /**
   * 切换科室
   * 
   * 当用户选择不同科室时，更新选中的科室并重新获取病友圈帖子列表
   * 
   * 功能特点：
   * - 支持科室标签页切换
   * - 重置分页状态到第一页
   * - 立即刷新帖子列表
   * - 更新UI高亮状态
   * - 包含调试日志，便于问题排查
   * 
   * @param departmentId 用户选择的科室ID
   */
  const handleDepartmentChange = (departmentId: number) => {
    console.log('切换科室:', departmentId)
    console.log('当前科室列表:', departments)
    console.log('选中的科室:', departments.find(dept => dept.id === departmentId))
    
    setActiveDepartmentId(departmentId)
    getSickCircleList(departmentId, 1, true)
  }

  /**
   * 加载更多数据
   * 
   * 当用户点击"加载更多"按钮时，加载下一页的病友圈帖子数据
   * 这是分页加载功能的核心实现
   * 
   * 工作原理：
   * 1. 检查当前是否正在加载或没有更多数据
   * 2. 计算下一页的页码
   * 3. 更新当前页码状态
   * 4. 发起API请求获取新数据
   * 5. 将新数据追加到现有列表
   * 6. 更新 hasMore 状态
   * 
   * 性能优化：
   * - 通过 loading 状态防止重复请求
   * - 通过 hasMore 状态防止无效请求
   * - 数据追加而不是替换，保持用户体验
   */
  const loadMore = () => {
    if (!loading && hasMore) {
      const nextPage = currentPage + 1
      setCurrentPage(nextPage)
      getSickCircleList(activeDepartmentId, nextPage, false)
    }
  }

  /**
   * 格式化时间戳
   * 
   * 将毫秒时间戳转换为易读的日期时间格式
   * 提供完善的错误处理，确保即使时间戳无效也能正常显示
   * 
   * 格式化规则：
   * - 输出格式：YYYY-MM-DD HH:mm
   * - 支持无效时间戳的处理
   * - 包含错误捕获和日志记录
   * 
   * @param timestamp 毫秒时间戳
   * @returns 格式化后的时间字符串
   */
  const formatTime = (timestamp: number) => {
    try {
      if (!timestamp || isNaN(timestamp)) {
        return '时间未知'
      }
      
      const date = new Date(timestamp)
      if (isNaN(date.getTime())) {
        return '时间格式错误'
      }
      
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hour = String(date.getHours()).padStart(2, '0')
      const minute = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hour}:${minute}`
    } catch (error) {
      console.error('时间格式化错误:', error)
      return '时间未知'
    }
  }

  /**
   * 跳转到病友圈详情页面
   * 
   * 当用户点击病友圈帖子时，跳转到该帖子的详情页面
   * 
   * 路由设计：
   * - 使用 RESTful 风格的URL
   * - 通过帖子ID构建详情页URL
   * - 支持浏览器前进后退操作
   * 
   * @param item 被点击的病友圈帖子对象，包含帖子的基本信息
   */
  const handleSickCircleClick = (item: SickCircleItem) => {
    navigate(`/sick-circle-detail/${item.sickCircleId}`)
  }

  /**
   * 处理收藏/取消收藏功能
   * 
   * 处理用户收藏或取消收藏病友圈帖子的操作，包括API调用、状态更新等
   * 这是病友圈页面的核心交互功能之一
   * 
   * 功能流程：
   * 1. 阻止事件冒泡，避免触发帖子的点击事件（跳转到详情页）
   * 2. 检查是否正在加载，防止重复操作
   * 3. 设置该帖子的加载状态为true
   * 4. 根据当前收藏状态决定操作类型
   * 5. 调用相应的API接口
   * 6. 更新本地状态和UI显示
   * 7. 更新收藏数量统计
   * 8. 显示操作结果提示
   * 9. 重置加载状态
   * 
   * 状态管理：
   * - API状态：通过API调用更新服务器端状态
   * - 本地状态：立即更新UI显示，提供即时反馈
   * - 收藏数量：实时更新收藏数量统计
   * 
   * 错误处理：
   * - 网络错误：显示重试提示
   * - API错误：显示具体错误信息
   * - 重复操作：通过加载状态防止
   * 
   * @param item 要操作的病友圈帖子对象
   * @param e 点击事件对象，用于阻止事件冒泡
   */
  const handleCollection = async (item: SickCircleItem, e: React.MouseEvent) => {
    e.stopPropagation() // 阻止事件冒泡，避免触发帖子的点击事件（跳转到详情页）
    
    // 如果正在加载，直接返回，防止重复操作
    if (collectionLoading[item.sickCircleId]) return
    
    // 设置该帖子的加载状态为true
    setCollectionLoading(prev => ({ ...prev, [item.sickCircleId]: true }))
    
    try {
      const isCollected = item.collectionFlag === 1
      
      if (isCollected) {
        // 已收藏状态：执行取消收藏操作
        const response = await cancelSickCircleCollection({ sickCircleId: item.sickCircleId })
        if (response.status === '0000') {
          // 取消收藏成功，更新本地状态
          setSickCircleList(prev => prev.map(listItem => 
            listItem.sickCircleId === item.sickCircleId 
              ? { 
                  ...listItem, 
                  collectionFlag: 0,  // 将收藏状态设置为0
                  collectionNum: Math.max(0, (listItem.collectionNum || 0) - 1)  // 减少收藏数量
                }
              : listItem
          ))
          Toast.show({
            content: '取消收藏成功',
            position: 'center',
          })
        } else {
          // 取消收藏失败，显示错误提示
          Toast.show({
            content: response.message || '取消收藏失败',
            position: 'center',
          })
        }
      } else {
        // 未收藏状态：执行收藏操作
        const response = await addSickCircleCollection({ sickCircleId: item.sickCircleId })
        if (response.status === '0000') {
          // 收藏成功，更新本地状态
          setSickCircleList(prev => prev.map(listItem => 
            listItem.sickCircleId === item.sickCircleId 
              ? { 
                  ...listItem, 
                  collectionFlag: 1,  // 将收藏状态设置为1
                  collectionNum: (listItem.collectionNum || 0) + 1  // 增加收藏数量
                }
              : listItem
          ))
          Toast.show({
            content: '收藏成功',
            position: 'center',
          })
        } else {
          // 收藏失败，显示错误提示
          Toast.show({
            content: response.message || '收藏失败',
            position: 'center',
          })
        }
      }
    } catch (error) {
      // 网络错误或其他异常，记录错误信息并显示用户友好的提示
      console.error('收藏操作失败:', error)
      Toast.show({
        content: '网络错误，请稍后重试',
        position: 'center',
      })
    } finally {
      // 无论成功还是失败，都要重置该帖子的加载状态
      setCollectionLoading(prev => ({ ...prev, [item.sickCircleId]: false }))
    }
  }

  /**
   * 发布新帖子
   * 
   * 处理用户点击发布按钮的事件，跳转到发布新帖子的页面
   * 
   * 功能特点：
   * - 跳转到专门的发布页面
   * - 保持当前页面的状态
   * - 支持发布完成后返回
   */
  const handlePublish = () => {
    navigate('/sick-circle-publish')
  }

  // ==================== 组件生命周期 ====================
  // 以下代码处理组件的生命周期事件
  
  /**
   * 组件初始化
   * 
   * 在组件挂载时获取科室列表数据
   * 这是组件的初始化逻辑，只在组件首次渲染时执行
   * 
   * 执行流程：
   * 1. 获取科室列表数据（用于筛选功能）
   * 2. 自动设置默认选中的第一个科室
   * 3. 获取该科室的病友圈帖子列表
   * 
   * 依赖数组为空，确保只在组件挂载时执行一次
   * 避免在每次渲染时重复获取数据
   */
  useEffect(() => {
    getDepartments()
  }, [])

  // ==================== 组件渲染 ====================
  // 以下代码负责渲染组件的UI界面
  
  return (
    <div className="sick-circle-container">
      {/* 头部导航栏：提供返回按钮和页面标题 */}
      <div className="header-navbar">
        <NavBar onBack={handleBack} className="custom-navbar">
          病友圈
        </NavBar>
      </div>

      {/* 科室导航：提供科室切换功能 */}
      <div className="department-tabs">
        <Tabs
          activeKey={activeDepartmentId.toString()}
          onChange={(key) => handleDepartmentChange(parseInt(key))}
          className="custom-tabs"
        >
          {departments.map((dept) => (
            <Tabs.Tab title={dept.departmentName} key={dept.id.toString()} />
          ))}
        </Tabs>
      </div>

      {/* 病友圈内容主体区域 */}
      <div className="sick-circle-content">
        {sickCircleList.length > 0 ? (
          <div className="sick-circle-list">
            {/* 病友圈帖子列表：展示所有帖子信息 */}
            {sickCircleList.map((item) => (
              <div 
                key={item.sickCircleId} 
                className="sick-circle-item"
                onClick={() => handleSickCircleClick(item)}
              >
                {/* 帖子标题和悬赏金额 */}
                <div className="item-header">
                  <h3 className="item-title">{item.title}</h3>
                  {/* 悬赏金额显示：只有当金额大于0时才显示 */}
                  {item.amount > 0 && (
                    <div className="bounty-badge">
                      <span className="bounty-icon">H</span>
                      <span className="bounty-amount">{item.amount}</span>
                    </div>
                  )}
                </div>

                {/* 发布时间：显示格式化的发布时间 */}
                <div className="item-time">
                  {formatTime(item.releaseTime)}
                </div>

                {/* 病症描述：显示帖子详细内容，超过100字符时截断 */}
                <div className="item-detail">
                  {item.detail && item.detail.length > 100 
                    ? `${item.detail.substring(0, 100)}...` 
                    : item.detail || '暂无描述'
                  }
                </div>

                {/* 互动数据：收藏和评论数量 */}
                <div className="item-actions">
                  {/* 收藏按钮：支持收藏/取消收藏操作 */}
                  <span 
                    className={`action-item ${collectionLoading[item.sickCircleId] ? 'loading' : ''}`}
                    onClick={(e) => {
                      e.stopPropagation()
                      // 检查权限，如果没有权限则提示
                      if (!userEmail) {
                        Toast.show('请先登录')
                        return
                      }
                      if (!hasPermission(userEmail, 'like')) {
                        Toast.show('暂无权限，无法收藏')
                        return
                      }
                      handleCollection(item, e)
                    }}
                  >
                    {collectionLoading[item.sickCircleId] ? (
                      // 加载状态：显示加载动画
                      <SpinLoading color="primary" style={{ fontSize: '14px' }} />
                    ) : (
                      // 正常状态：显示收藏图标
                      <StarOutline className={item.collectionFlag === 1 ? 'active' : ''} />
                    )}
                    收藏 {item.collectionNum || 0}
                  </span>
                  
                  {/* 评论按钮：跳转到评论页面 */}
                  <span 
                    className="action-item" 
                    onClick={(e) => { 
                      e.stopPropagation()
                      // 检查权限，如果没有权限则提示
                      if (!userEmail) {
                        Toast.show('请先登录')
                        return
                      }
                      if (!hasPermission(userEmail, 'comment')) {
                        Toast.show('暂无权限，无法评论')
                        return
                      }
                      navigate(`/pinglun?id=${item.sickCircleId}`) 
                    }}
                  >
                    <span className="action-icon">💬</span>
                    建议 {item.commentNum || 0}
                  </span>
                </div>
              </div>
            ))}

            {/* 加载更多按钮：当还有更多数据时显示 */}
            {hasMore && (
              <div className="load-more">
                <Button 
                  fill="outline" 
                  onClick={loadMore}
                  loading={loading}
                  className="load-more-btn"
                >
                  {loading ? '加载中...' : '加载更多'}
                </Button>
              </div>
            )}
          </div>
        ) : !loading ? (
          // 空状态：当没有数据且不在加载时显示
          <div className="empty-state">
            <div className="empty-icon">📝</div>
            <p className="empty-text">暂无病友圈内容</p>
            <p className="empty-subtext">快来发布第一个帖子吧</p>
          </div>
        ) : null}

        {/* 加载状态：当正在加载且没有数据时显示 */}
        {loading && sickCircleList.length === 0 && (
          <div className="loading-state">
            <SpinLoading color="primary" />
            <p>加载中...</p>
          </div>
        )}
      </div>

      {/* 发布按钮：悬浮操作按钮，用于发布新帖子 */}
      <div 
        className="publish-fab" 
        onClick={() => {
          // 检查权限，如果没有权限则提示
          if (!userEmail) {
            Toast.show('请先登录')
            return
          }
          if (!hasPermission(userEmail, 'publish')) {
            Toast.show('暂无权限，无法发布内容')
            return
          }
          handlePublish()
        }}
      >
        <AddOutline />
      </div>
    </div>
  )
}

// 导出病友圈组件，供其他模块使用
export default SickCircle
